<template>
  <li>
    <div>
      <div class="row prj_table">
        <span v-if="isFolder" :class="{bold: isFolder}">{{ open ? '-' : '+' }}</span>
        <div class="col-xs-6 col-sm-4 col-md-2"  v-for="(value) in colums" :key="value.id" @click="toggle">{{model[value.name]}}</div>
        菜单->
        <q-fab color="purple" icon="keyboard_arrow_up" direction="up" >
          <q-fab-action color="secondary" icon="edit" @click.native="jump({projectId:model.id})"/>
          <q-fab-action color="secondary" icon="file_copy" @click.native="copy({projectId:model.id})"/>
          <q-fab-action color="secondary" icon="insert_photo" v-if="!model.parent" @click.native="$store.commit('listProject/showSvg', model.id)"/>
          <q-fab-action color="negative" icon="play_arrow" v-if="model.status_code !== 4 && model.status_code !== 3" @click.native="$store.dispatch('listProject/initHost', model.id)"/>
          <q-fab-action color="secondary" icon="message" v-if="model.status_code == 3" @click.native="$store.commit('listProject/saltInfo', model.id)"/>
        </q-fab>
      </div>
    </div>
    <ul v-show="open" v-if="isFolder">
      <tree-table class="item" v-for="(model, index) in model.zi_sun" :key="index" :model="model" :colums="colums"></tree-table>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'tree-table',
  data: function () {
    return {
      open: true
    }
  },
  props: {
    model: Object,
    colums: Array
  },
  computed: {
    isFolder: function () {
      return this.model.zi_sun &&
        this.model.zi_sun.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    jump (path) {
      this.$router.push({name: 'editproject', params: path})
    },
    copy (path) {
      this.$router.push({name: 'copyproject', params: path})
    }
  }
}
</script>

<style scoped>
li {
  list-style:none;
}
div {
  cursor: pointer;
  padding-left: 10px;
}
.bold {
  font-weight: bold;
}
.treeStyle{
  text-align: left;
  line-height: 20px;
}
.bdline {
  border-bottom: 1px solid rgba(0,0,0,.12);
}
</style>
